<template>
	<view>
		<view class="body after-navber" style="height: 100vh">
			<form @submit="productSubmit" :reportSubmit="true">
				
				<view class="form-group-name">店铺信息</view>
				<view class="input-group-list">
					<view class="flex flex-row input-group">
						<view class="flex-grow-0 flex-y-center input-group-label"><view class="xin">*</view>店铺名称</view>
						<view class="flex-grow-1">
							<input class="flex-y-center" disabled="true" placeholder="必填" placeholderClass="placeholder"
								:value="name" />
						</view>
					</view>
					<view class="flex flex-row input-group">
						<view class="flex-grow-0 flex-y-center input-group-label"><view class="xin">*</view>标题</view>
						<view class="flex-grow-1">
							<input class="flex-y-center" name="title" placeholder="必填" placeholderClass="placeholder"
								value="" />
						</view>
					</view>
					<view class="flex flex-row input-group">
						<view class="flex-grow-0 flex-y-center input-group-label"><view class="xin">*</view>价格</view>
						<view class="flex-grow-1">
							<input class="flex-y-center" name="cost_price" placeholder="必填" placeholderClass="placeholder"
								value="" />
						</view>
					</view>
	
				</view>
				<view class="form-group-name">图片</view>
				<view class="input-group-list" style="margin-bottom: 32rpx">
					<view class="flex flex-row input-group" style="height: auto">
						<view class="flex-grow-0 flex-y-center input-group-label"><view class="xin">*</view>宣传图</view>
						<view class="flex-grow-1" style="margin: 20rpx 0">
							<view class="question-images clearFloat">
								<block v-for="(item, index) in images0" :key="index">
									<view class="q-image-wrap">
										<!-- 图片缩略图 -->
										<image class="q-image" :src="item" mode="aspectFill" :data-idx="index"
											@tap="handleImagePreview(index,0)"></image>
										<!-- 移除图片的按钮 -->
										<view class="q-image-remover" :data-idx="index" @tap="removeImage(index,0)">
											<view class="close-img">✘</view>
										</view>
									</view>
								</block>
								<view class="uploadImgBtn" @tap="chooseImage(0)" v-if="images0.length < 1">
									<image style="width: 150rpx; height: 150rpx" src="/static/images/vPlUk8CwSBK3a6Gj.png">
									</image>
								</view>
							</view>
						</view>
					</view>
				
					<view class="flex flex-row input-group" style="height: auto">
						<view class="flex-grow-0 flex-y-center input-group-label"><view class="xin">*</view>轮播图</view>
						<view class="flex-grow-1" style="margin: 20rpx 0">
							<view class="question-images clearFloat">
								<block v-for="(item, index) in images1" :key="index">
									<view class="q-image-wrap">
										<!-- 图片缩略图 -->
										<image class="q-image" :src="item" mode="aspectFill" :data-idx="index"
											@tap="handleImagePreview(index,1)"></image>
										<!-- 移除图片的按钮 -->
										<view class="q-image-remover" :data-idx="index" @tap="removeImage(index,1)">
											<view class="close-img">✘</view>
		 							</view>
									</view>
								</block>
								<view class="uploadImgBtn" @tap="chooseImage(1)" v-if="images1.length < 10">
									<image style="width: 150rpx; height: 150rpx" src="/static/images/vPlUk8CwSBK3a6Gj.png">
									</image>
								</view>
							</view>
						</view>
					</view>
					<view class="flex flex-row input-group" style="height: auto">
						<view class="flex-grow-0 flex-y-center input-group-label"><view class="xin">*</view>套餐图片</view>
						<view class="flex-grow-1" style="margin: 20rpx 0">
							<view class="question-images clearFloat">
								<block v-for="(item, index) in images2" :key="index">
									<view class="q-image-wrap">
										<!-- 图片缩略图 -->
										<image class="q-image" :src="item" mode="aspectFill" :data-idx="index"
											@tap="handleImagePreview(index,2)"></image>
										<!-- 移除图片的按钮 -->
										<view class="q-image-remover" :data-idx="index" @tap="removeImage(index,2)">
											<view class="close-img">✘</view>
										</view>
									</view>
								</block>
								<view class="uploadImgBtn" @tap="chooseImage(2)" v-if="images2.length < 10">
									<image style="width: 150rpx; height: 150rpx" src="/static/images/vPlUk8CwSBK3a6Gj.png">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
			
				<button class="submit-btn" formType="submit" style="margin-top: 0" >提交</button>
		
			</form>
			
	
		</view>
	</view>
</template>

<script>
import {
		Agent
	} from '../../../apirequest/agent-model.js';
	var a = new Agent();
	export default {
		data() {
			return {
				is_form_show: true,
				//店招
				images0:[],
				images0_:[],
				//营业执照
				images1: [],
				images1_: [],
				//其他资质
				images2: [],
				images2_: [],
				store_id:0,
				name:''
			}
		},
		onLoad(options) {
			this.store_id = options.store_id
			this.name = options.name
		},
		methods: {
			
			productSubmit: function(e) {
				var that = this;
				var param = e.detail.value;
				
				if(param.title == '' || !param.title){
					uni.showToast({
						title:'请输入标题',
						icon:'none'
					})
					return false;
				}
				if(param.cost_price == '' || !param.cost_price){
					uni.showToast({
						title:'请输入价格',
						icon:'none'
					})
					return false;
				}
			
				if(this.images0.length == 0 || !this.images0){
					uni.showToast({
						title:'请上传宣传图',
						icon:'none'
					})
					return false;
				}
				if(this.images1.length == 0 || !this.images1){
					uni.showToast({
						title:'请上传轮播图',
						icon:'none'
					})
					return false;
				}
				if(this.images2.length == 0 || !this.images2){
					uni.showToast({
						title:'请上传套餐图',
						icon:'none'
					})
					return false;
				}
				
				param.image = this.images0_[0]
				param.images = this.images1_.join(',')
				param.products_images = this.images2_.join(',')
			
				param.store_id = this.store_id;
				
				a.daodian(param,(res) => {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					if(res.code == 1){
						setTimeout(() => {
							uni.navigateBack({
								delta:1
							})
						},1000)
					}
				})
			},
		
			// 营业执照
			chooseImage(type) {
				var _this = this
				var count = 1;
				if(type != 1){
					count = 9;
				}
				var len = 0;
				if(type == 0){
					len = this.images0.length
				}else if(type == 1){
					len = this.images1.length
				}else if(type == 2){
					len = this.images2.length
				}
				count -= len;
				uni.chooseImage({
					count: count,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'], 
					success: (res) => {
						const tempFilePaths = res.tempFilePaths
						tempFilePaths.forEach((e,i) => {
							len++;
							if(len > 9){
								uni.showToast({
									title:'最多只能上传9张图片',
									icon:'none'
								})
								return false;
							}
							a.upload(tempFilePaths[i], (r) => {
								var r = JSON.parse(r);
								if (r.code == 1) {
									if(type == 0){
										_this.images0.splice(0, 1, r.data.fullurl);
										_this.images0_.splice(0, 1, r.data.url);
									}else if(type == 1){
										_this.images1.splice(0, 1, r.data.fullurl);
										_this.images1_.splice(0, 1, r.data.url);
									}else if(type == 2){
										_this.images2.splice(i+len, 1, r.data.fullurl);
										_this.images2_.splice(i+len, 1, r.data.url);
									}
									
									
								} else {
									uni.showToast({
										title: r.msg,
										icon: 'none'
									})
								}
							},'store')
						})

					}
				})

			},
			removeImage(index,type) {
				var that = this;

				if(type == 0){
			
					this.images0.splice(index, 1);
					this.images0_.splice(index, 1);
					
				}else if(type == 1){
					this.images1.splice(index, 1);
					this.images1_.splice(index, 1);
				}else if(type == 2){
					this.images2.splice(index, 1);
					this.images2_.splice(index, 1);
				}
				

				
			},

			handleImagePreview(index,type) {
			
				var images = this.images; // 获取要删除的第几张图片的下标
				if(type == 0){
					images = this.images0
				}else if(type == 1){
					images = this.images1
				}else if(type == 2){
					images = this.images2
				}
				uni.previewImage({
					current: images[index],
					//当前预览的图片
					urls: images //所有要预览的图片
				});
			},


		}
	}
</script>

<style>
	.block-button {
		display: block;
		padding: 0;
		margin: 0;
		font-size: inherit;
		line-height: inherit;
		background: none;
	}

	.block-button:after {
		display: none;
	}

	.placeholder {
		color: #aaa;
	}

	.form-group-name {
		color: #888;
		padding: 32rpx 0 8rpx 32rpx;
	}

	.input-group {
		background: #fff;
		height: 100rpx;
		position: relative;
	}

	.input-group .input-group-label {
		padding: 0 32rpx;
		line-height: inherit;
		min-width: 200rpx;
		white-space: nowrap;
	}

	.input-group picker,
	.input-group input {
		height: 100%;
		width: 100%;
		padding: 0 32rpx;
		font-size: inherit;
		line-height: inherit;
	}

	.input-group-list {
		border-top: 1rpx solid #e9e9e9;
		border-bottom: 1rpx solid #e9e9e9;
	}

	.input-group-list .input-group:after {
		display: block;
		content: ' ';
		height: 0;
		border-bottom: 1rpx solid #eee;
		position: absolute;
		bottom: 0;
		left: 32rpx;
		right: 32rpx;
	}

	.input-group-list .input-group:last-child:after {
		display: none;
	}

	.submit-btn {
		background: #ff4544;
		border-radius: 8rpx;
		color: #fff;
		margin: 64rpx 32rpx;
	}

	.apply-result {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #fff;
		z-index: 10;
		transition: 200ms;
		visibility: hidden;
		opacity: 0;
		text-align: center;
		padding: 150rpx 95rpx;
	}

	.apply-result.show {
		visibility: visible;
		opacity: 1;
	}

	.apply-result .review-status {
		margin-bottom: 12rpx;
		font-size: 13pt;
	}

	.apply-result .status-0 {}

	.apply-result .status-1 {
		color: #1aa349;
	}

	.apply-result .status-2 {}

	.apply-result .review-result {
		margin-bottom: 64rpx;
	}

	.view-data-btn {
		color: #387ee8;
	}

	.entry-rules {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 10;
		padding: 50rpx;
	}

	.rules-container {
		background: #fff;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.rules-container text {
		max-width: 100%;
	}

	.rules-container .rules-btn {
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		border-top: 1rpx solid #e3e3e3;
		border-right: 1rpx solid #e3e3e3;
	}

	.rules-container .rules-btn:last-child {
		border-right: none;
	}

	.q-image {
		width: 150rpx;
		height: 150rpx;
	}

	.q-image-wrap {
		width: 150rpx;
		height: 150rpx;
		float: left;
		margin-right: 20rpx;
		position: relative;
		overflow: hidden;
	}

	.q-image-remover {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
		background: #2b9f3c;
		position: absolute;
		top: -50rpx;
		right: -50rpx;
	}

	.q-image-remover icon {
		position: absolute;
		left: 12rpx;
		bottom: 12rpx;
		color: #fff;
	}

	.uploadImgBtn {
		width: 150rpx;
		height: 150rpx;
		text-align: center;
		line-height: 140rpx;
		float: left;
		overflow-y: hidden;
	}

	.uploadImgBtn icon {
		font-size: 80rpx;
		color: #999;
	}

	.close-img {
		position: absolute;
		bottom: 13rpx;
		color: #fff;
		font-size: 1rem;
		left: 17rpx;
	}

	.area-picker {
		position: fixed;
		z-index: 10000;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		transform: translateY(100%);
		transition: 250ms opacity;
		opacity: 0;
		background: rgba(0, 0, 0, 0.3);
	}

	.area-picker.active {
		transform: translateY(0);
		opacity: 1;
	}

	.area-picker .area-picker-bg {
		flex-grow: 1;
		position: relative;
	}

	.area-picker .area-picker-bg>scroll-view {
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		position: absolute;
	}

	.area-picker .area-picker-body {
		flex-grow: 0;
		height: 600rpx;
		background: #fff;
		transform: translateY(100%);
		transition: 250ms transform;
		position: relative;
	}

	.area-picker.active .area-picker-body {
		transform: translateY(0);
	}

	.area-picker .area-picker-body>scroll-view {
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		position: absolute;
	}

	.area-picker .area-picker-cancel,
	.area-picker .area-picker-confirm {
		display: inline-block;
		padding: 24rpx;
		color: #888;
	}

	.area-picker .area-picker-confirm {
		float: right;
		color: #00aa00;
	}

	.area-picker .area-picker-row {
		width: 100%;
		height: 500rpx;
	}
	.xin {
		width: 18rpx;
		height: 18rpx;
		margin-right: 10rpx;
		color: #fa5856;
		line-height: 26rpx;
	}
</style>

</style>
